<!DOCTYPE html>
<html lang="en" class="x-admin-sm">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>新增新闻公告信息</title>
    <link rel="stylesheet" href="./assets/layui/css/layui.css" media="all" />
    <script type="text/javascript" src="./assets/layui/layui.js"></script>
</head>

<body class="childrenBody">
    <div id="app">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>新增新闻公告信息</legend>
        </fieldset>
        <div class="layui-form" style="width: 80%;">
            <div class="layui-form-item"><label class="layui-form-label">标题</label>
                <div class="layui-input-block"><input type="text" class="layui-input" id="title" v-model="title"
                        placeholder="请输入标题" />
                </div>
            </div>
            <div class="layui-form-item"><label class="layui-form-label">图片</label>
                <div class="layui-input-block">
                    <form id="head-img" enctype="multipart/form-data">
                        <input type="file" name="image" id="image" placeholder="请选择图片" />
                        <button type="button" class="layui-btn" @click="upload()"><i class="layui-icon layui-icon-upload"></i> 上传</button>
                    </form>
                </div>
            </div>
            <div class="layui-form-item"><label class="layui-form-label">内容</label>
                <div class="layui-input-block">
                   <textarea class="layui-input" id="contents" v-model="contents" style="height: 220px;" placeholder="请输入内容"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" @click.prevent="save()">提交保存</button>
                    <button class="layui-btn" @click.prevent="reset()">取消重置</button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="./assets/js/axios.min.js"></script>
    <script type="text/javascript" src="./assets/js/vue.js"></script>
    <script type="text/javascript" src="./assets/js/jquery.min.js"></script>
    <script type="text/javascript">
		const vue = new Vue({ // 实例化Vue对象
			el: '#app',// 绑定作用域
			data: { //定义数据
				title: '', // 定义标题数据
				url: '',
				contents: '', // 定义内容数据
			},
			methods: {
				upload: function () {
					let _this = this;
					var formData = new FormData($('#head-img')[0]);
					axios.post('http://localhost:8080/vue_gxhfztjxt/ajaxupload/upload.action', formData).then(result => {
						_this.url = result.data.url;
						alert("上传成功");
					});
				},
				save: function () {
					let _this = this;
					var data = {
						title: _this.title,
						image: _this.url,
						contents: _this.contents,
					};
					axios.post('http://localhost:8080/vue_gxhfztjxt/article/insertArticle.action', data).then(result => {
						if (result.data.code > 0) {
							if (window.confirm('保存成功,是否继续添加？')) {
								_this.reset();
							} else {
								var index = parent.layer.getFrameIndex(window.name);
								parent.location.reload();
								parent.layer.close(index);
							}
						} else {
							console.log('保存失败,请稍后再试');
						}
					});
				},
				reset: function () {
					this.pageLoad();
				},
				pageLoad: function () { // 页面加载
					this.title= '';
					this.url= '';
					this.contents= '';
				},
				validate: function () { // 验证输入非空
				},
			},
			created() { // 生命周期相关的函数
				let _this = this;
              layui.use(['element', 'layer', 'form'], function() {
                $ = layui.jquery; // jquery
              });
				_this.pageLoad();
			},
		})
	</script>

</body>

</html>


